<script setup>
import { computed, ref } from 'vue'
// 调用接口
import { homeBrand } from '@/api/home'
import { lazyApi } from '@/utils/lazy'

// 获取品牌列表
const brandList = ref([])
const getBrandList = async () => {
  const res = await homeBrand(10)
  brandList.value = res.data.result
}
const { target } = lazyApi(getBrandList)
// 分割成两个列表
const brandList1 = computed(() => brandList.value.slice(0, 5))
const brandList2 = computed(() => brandList.value.slice(5))

// 切换按钮及动画效果
const showFirst = ref(true)
const transitionName = ref('slide-left')

const toggleDivs = direction => {
  if ((direction === 'left' && showFirst.value) || (direction === 'right' && !showFirst.value)) {
    transitionName.value = direction === 'left' ? 'slide-left' : 'slide-right'
    showFirst.value = !showFirst.value
  }
}

// 跳转页面顶部
const goTop = () => {
  window.scrollTo(0, 0)
}
</script>

<template>
  <div class="brand">
    <div class="container">
      <div class="head" ref="target">
        <span style="font-size: 30px; margin-right: 20px">热门品牌</span>
        <span style="font-size: 16px; color: #999; margin-right: 800px">国际品牌 品质保证</span>
        <button
          :disabled="showFirst"
          :class="{ 'disabled-button': showFirst, 'enabled-button': !showFirst }"
          @click="toggleDivs('right')"
        >
          <el-icon><ArrowLeftBold /></el-icon>
        </button>
        <button
          :disabled="!showFirst"
          :class="{ 'disabled-button': !showFirst, 'enabled-button': showFirst }"
          @click="toggleDivs('left')"
        >
          <el-icon><ArrowRightBold /></el-icon>
        </button>
      </div>
      <div class="body">
        <transition :name="transitionName" mode="out-in">
          <div v-if="showFirst" key="first" class="brand__list">
            <ul
              style="
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
              "
            >
              <li v-for="item in brandList1" :key="item.id">
                <img :src="item.picture" alt="" @click="goTop" />
              </li>
            </ul>
          </div>
          <div v-else key="second" class="brand__list">
            <ul
              style="
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
              "
            >
              <li v-for="item in brandList2" :key="item.id">
                <img :src="item.picture" alt="" @click="goTop" />
              </li>
            </ul>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.brand {
  width: 100%;
  height: 460px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  .container {
    width: 1240px;
    height: 100%;
    .head {
      margin: 30px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      /* Button Styles */
      button {
        width: 20px;
        height: 20px;
        margin-left: 5px;
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .enabled-button {
        background-color: #27ba9b;
      }
      .disabled-button {
        background-color: gray;
        cursor: not-allowed;
      }
    }
    .body {
      display: flex;
      justify-content: center;
      .brand__list {
        img {
          width: 240px;
          height: 305px;
          margin-right: 8px;
          cursor: pointer;
        }
        position: absolute;
      }
    }
  }
}

// 动画效果
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.08s ease;
}

/* Slide Left Animation */
.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-enter-to,
.slide-left-leave-from {
  transform: translateX(0);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

/* Slide Right Animation */
.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-enter-to,
.slide-right-leave-from {
  transform: translateX(0);
}

.slide-right-leave-to {
  transform: translateX(100%);
}
</style>
